<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件动态绑定数据</title>
</head>
<body>
<!--
■组件自己的数据存放在哪里呢?
  口组件对象也有一个data属性(也可以有methods等属性,下面我们有用到)
  口只是这个data属性必须是一个函数
  口而且这个函数返回一个对象,对象内部保存着数据
-->

<div id="app">
  <!--  2、使用组件-->

  <!--  全局组件-->
  <p>全局组件</p>
  <my-div1></my-div1>
  <hr>
  <!--  局部组件-->
  <p>局部组件</p>
  <my-div2></my-div2>

  <!--
    ■这里是相当于创建了四个组件对象，每个组件对象是互不影响的，这和组件对象的data属性为什么是函数有关？
      因为data是直接return返回的一个对象，所以这里调用相当于创建实例时，每个data返回的都是一个单独的data数据对象，
      这样才能做到组件的复用，要是data指向的一个对象，可以想象，每次实例化组件对象时，每个data都指向的是同一个数据对象，就不能
      进行复用了，因为只要其中一个组件改变了data数据，那么其他组件也就跟着变化了，这很明显是不符合逻辑的
    -->
  <!--  <my-div1></my-div1>-->
  <!--  <my-div1></my-div1>-->
  <!--  <my-div2></my-div2>-->
  <!--  <my-div2></my-div2>-->
</div>


<!--第一种写法：template标签-->
<template id="myDiv1">
  <div>
    <!--    组件动态绑定属性-->
    <h2>{{title1}}</h2>
    <p>{{content1}}</p>
    <p>{{counter}}</p>
    <button @click="counterAdd">-</button>
    <button @click="counterSub">-</button>
  </div>
</template>

<!--第二种写法：script标签，注意类型必须是text/x-template-->
<script type="text/x-template" id="myDiv2">
  <div>
    <!--    组件动态绑定属性-->
    <h2>{{title2}}</h2>
    <p>{{content2}}</p>
    <p>{{counter2}}</p>
    <button @click="counterAdd2">-</button>
    <button @click="counterSub2">-</button>
  </div>
</script>

<script src="../js/vue.js"></script>
<script>

  // ■组件不能直接绑定VUE实例的属性数据，只能通过组件内部的data属性来进行动态绑定数据，和methods绑定组件方法

  // ■【注册全局组件的语法糖】
  // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象，
  // 组件对象有一个template属性，属性值为绑定template标签或script标签的id
  // 同时标签动态绑定数据，需要用到组件对象中的data属性，data属性是一个函数，函数返回数据对象，数据对象里面保存着数据
  Vue.component('myDiv1', { // 属性名为要注册组件的名称，随便命名，给组件起一个名字
    template: "#myDiv1", //绑定需要注册的组件
    data() { // 组件要绑定的数据
      return {
        title1: "我是标题1",
        content1: "我是内容1",
        counter: 0
      };
    },
    methods: { //组件绑定的方法
      counterAdd() {
        this.counter++
      },
      counterSub() {
        this.counter--
      }
    }
  })

  //■【注册局部组件的语法糖】
  const app = new Vue({
    el: "#app",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    // 构造的组件有一个template属性，值为要绑定的template标签或script标签的id
    // 同时标签动态绑定数据，需要用到组件对象中的data属性，data属性是一个函数，函数返回数据对象，数据对象里面保存着数据
    components: {
      myDiv2: { // 属性名为要注册组件的名称，随便命名，给组件起一个名字
        template: "#myDiv2", //绑定需要注册的组件
        data() { // 组件要绑定的数据
          return {
            title2: "我是标题2",
            content2: "我是内容2",
            counter2: 0
          }
        },
        methods: { //组件绑定的方法
          counterAdd2() {
            this.counter2++
          },
          counterSub2() {
            this.counter2--
          }
        }
      }
    }
  });
</script>
</body>
</html>